<template>
  <div class="notice-wrap">
    <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="正常" inactive-text="禁用" class="switch" @change="handleChange"/>
    <div>
      <tinymce v-show="value2" ref="editor" :height="500" v-model="content"/>
    </div>
    <el-row class="row">
      <el-button type="primary" @click="handleSubmit">确认</el-button>
      <el-button plain>重置</el-button>
    </el-row>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { updateStyle } from '@/api/data'
export default {
  name: 'Notice',
  components: {
    Tinymce
  },
  data() {
    return {
      content: '',
      value2: true,
      id: '1ce202021de14da0a08ffa8e2e6d9a56',
      title: '公告管理'
    }
  },
  methods: {
    handleSubmit() {
      this.update()
    },
    handleChange() {
      if (!this.value2) {
        this.content = ''
        this.update()
      }
    },
    update() {
      const { title, content, id } = this
      updateStyle(title, content, id)
        .then((res) => {
          this.$message.success({
            message: '修改成功',
            duration: 1000
          })
        }).catch((res) => {
          this.$message.info({
            message: '请稍后再试',
            duration: 1000
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.notice-wrap {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .switch {
    margin-bottom: 20px;
  }
  .row {
    padding-top: 20px;
  }
}
</style>
